<template>
  <div class="side-bar">
    <el-menu
      @select="handleSelect"
      :background-color="backgroundColor"
      text-color="#fff"
      active-text-color="#ffd04b"
      :collapse="collapse"
      ref="menu"
    >
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>理财产品</span>
        </template>
        <el-menu-item index="1-1">
          <i class="el-icon-location"></i>图表
        </el-menu-item>
        <el-menu-item index="1-2">
          <i class="el-icon-location"></i>管理
        </el-menu-item>
      </el-submenu>
      <el-submenu index="2">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>首贷户</span>
        </template>
        <el-menu-item index="2-1">
          <i class="el-icon-location"></i>图表
        </el-menu-item>
        <el-menu-item index="2-2">
          <i class="el-icon-location"></i>上传数据
        </el-menu-item>
        <el-menu-item index="2-5">
          <i class="el-icon-location"></i>首贷户
        </el-menu-item>
        <el-menu-item index="2-6">
          <i class="el-icon-location"></i>校验结果
        </el-menu-item>
        <el-menu-item index="2-4">
          <i class="el-icon-location"></i>数据库
        </el-menu-item>

        <el-menu-item index="2-3">
          <i class="el-icon-location"></i>统计专报
        </el-menu-item>
      </el-submenu>
      <el-submenu index="4">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>统计数据质量监测</span>
        </template>
        <el-menu-item index="4-1">
          <i class="el-icon-location"></i>评分
        </el-menu-item>
        <el-menu-item index="4-2">
          <i class="el-icon-location"></i>评分模型
        </el-menu-item>
        <el-menu-item index="4-3">
          <i class="el-icon-location"></i>被评分机构
        </el-menu-item>
      </el-submenu>
      <el-submenu index="3">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>系统基础信息</span>
        </template>
        <el-menu-item index="3-1">
          <i class="el-icon-location"></i>理财产品机构
        </el-menu-item>
        <el-menu-item index="3-2">
          <i class="el-icon-location"></i>境内地区
        </el-menu-item>
        <el-menu-item index="3-3">
          <i class="el-icon-location"></i>境外地区
        </el-menu-item>
        <el-menu-item index="3-4">
          <i class="el-icon-location"></i>首贷户分机构报表
        </el-menu-item>
        <el-menu-item index="3-5">
          <i class="el-icon-location"></i>首贷户担保方式
        </el-menu-item>
      </el-submenu>
    </el-menu>
  </div>
</template>
<script>
import { Menu, Submenu, Icon, MenuItem, MenuItemGroup } from "element-ui";
export default {
  name: "SideBar",
  props: {
    backgroundColor: String,
    collapse: Boolean
  },
  components: {
    [Menu.name]: Menu,
    [Submenu.name]: Submenu,
    [Icon.name]: Icon,
    [MenuItem.name]: MenuItem,
    [MenuItemGroup.name]: MenuItemGroup
  },
  data() {
    return {};
  },
  mounted() {
    //默认左开菜单
    this.$refs.menu.open("1");
  },
  methods: {
    handleSelect(key, keyPath) {
      let message = "";
      if (key === "1-1") {
        message = "bank-financing-show";
      } else if (key === "1-2") {
        message = "bank-financing-manage";
      } else if (key === "2-1") {
        message = "first-loan-chart";
      } else if (key === "2-2") {
        message = "first-loan-manage";
      } else if (key === "2-3") {
        message = "first-loan-table";
      } else if (key === "2-4") {
        message = "first-loan-base";
      } else if (key === "2-5") {
        message = "first-loan";
      } else if (key === "2-6") {
        message = "first-loan-result";
      } else if (key === "3-1") {
        message = "bank_financing-org";
      } else if (key === "3-2") {
        message = "area";
      } else if (key === "3-3") {
        message = "abroad";
      } else if (key === "3-4") {
        message = "first-loan-org-category";
      } else if (key === "3-5") {
        message = "first-loan-guarantee";
      } else if (key === "4-1") {
        message = "score-manage";
      } else if (key === "4-2") {
        message = "score-model";
      } else if (key === "4-3") {
        message = "score-org";
      }
      this.$emit("menuClick", message);
    }
  }
};
</script>
<style lang="stylus" scoped>
.side-bar {
  border: none;

  .el-menu {
    border: none;
  }
}
</style>